<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta th:replace="frontend/fragment/style"/>
    <link rel="stylesheet" href="/static/plugins/layui-fly/css/global.css">
    <title th:text="${settings.website_title+' - '+settings.menu_project}"></title>
    <style>
        #project-body {
            min-height: 660px;
            margin-top: 100px;
        }
        .layui-laypage a, .layui-laypage span {
            background-color: inherit;
        }
    </style>
</head>
<body class="simple">
<div id="project-app">
    <bmy-header-mini :params="params" :st="false" :bodyid="bodyId" :show-small="false"
                     :project="current"></bmy-header-mini>
    <hr class="header-hr">
    <div id="project-body" class="layui-container simple animated fadeInUp">

        <div class="fly-main" style="overflow: hidden;">
            <div class="fly-tab-border fly-case-tab">
                <blockquote class="layui-elem-quote">{{params.project_top_notice}}</blockquote>
            </div>
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li :class="{ 'layui-this':isCurrentCateId(pc.id) }" v-for="pc in projectCates">
                        <a :href="cateHref(pc.id)">{{pc.cnName}}</a>
                    </li>
                </ul>
            </div>

            <ul class="fly-case-list">
                <template v-for="p in projects">
                    <li>
                        <a class="fly-case-img" :href="p.url" target="_blank">
                            <img :src="p.cover" :alt="p.name">
                            <cite class="layui-btn layui-btn-primary layui-btn-small">前往主页</cite>
                        </a>
                        <h2><a :href="p.url" target="_blank">{{p.name}}</a></h2>
                        <p class="fly-case-desc">{{p.description}}</p>
                        <div class="fly-case-info">
                            <a :href="p.url" class="fly-case-user" target="_blank"><img
                                    :src="p.cover"></a>
                            <p class="layui-elip" style="font-size: 12px;height: 38px;margin-top: 10px;"><span
                                    style="color: #666;">发布于</span> {{pDate(p.post)}}
                            </p>
                            <button class="layui-btn layui-btn-primary fly-case-active" data-type="praise">详细</button>
                        </div>
                    </li>
                </template>

            </ul>

            <blockquote class="layui-elem-quote" v-show="projectEmpty" style="text-align: center;">暂无数据
            </blockquote>

            <div id="project-page" style="text-align: center;"></div>

        </div>
    </div>
    <bmy-footer :words="params.footer_words"></bmy-footer>
    <bottom-nav :params="params" :layui-element="elem"></bottom-nav>
</div>
<div th:replace="frontend/fragment/script"></div>
<script th:inline="javascript">
    layui.use(['element', 'laypage'], function () {
        var laypage = layui.laypage;
        BMY.projectVm = new Vue({
            el: "#project-app",
            data: {
                params: [[${settings}]]
                , su: [[${su}]]
                , currentCateId: [[${currentCateId}]]
                , projects: [[${projects.content}]]
                , projectEmpty: [[${projects.totalElements == 0}]]
                , projectCates: [[${projectCates}]]
                , current: true
                , bodyId: "project-body"
                , elem: layui.element
            }
            , methods: {
                isCurrentCateId: function (ccid) {
                    return this.currentCateId === ccid || this.currentCateId === null;
                }
                , cateHref: function (id) {
                    return "/project?cateId=" + id;
                }
                , pDate: function (date) {
                    return date.split("T")[0];
                }
            },
            mounted: function () {
                bottomNav();

                //完整功能
                laypage.render({
                    elem: 'project-page'
                    , count: [[${projects.totalElements}]]
                    , theme: '#F44336'
                    , limit: 20
                    , layout: ['count', 'prev', 'page', 'next', 'refresh']
                    , jump: function (obj, first) {
                        if (!first) {
                            layer.msg('第 ' + obj.curr + ' 页');
                            $.post("/project/next", {
                                cateId: BMY.projectVm.currentCateId
                                , page: obj.curr
                                , limit: 20
                            }, function (obj) {
                                BMY.projectVm.projects = obj.data.content;
                            })
                        }
                    }

                })
            }
        })
    })

</script>
</body>
</html>